<script>
    //Configura o form para cadastro
    $(document).ready(function(){
        configura_mascara();
        juridica_fisica();
    });
    
    
function configura_mascara(){
    $(".telefone").mask("(99) 9999-9999");
    $("#cep").mask("99999-999");
    $("#cliente").mask("99.999.999/9999-99");
    $(document.cliente.elements["cliente[CLI_DESCRICAO]"]).limit(255);
}

// Executado quando clica no radio button
function juridica_fisica(){
    value = document.cliente.elements['cliente[CLI_TIPO]'].value;
    if(value == "F"){
        $("#td_fantasia").html("Nome de<br/>Apresenta&ccedil;&atilde;o:*");
        $("#cliente").mask("999.999.999-99");
    }else{
        $("#td_fantasia").html("Nome<br/>Fantasia:*");
        $("#cliente").mask("99.999.999/9999-99");
    }
}

// Valida os campos no submite
function validaCliente(){
    
    var form = document.cliente;
    var pessoa = form.elements['cliente[CLI_TIPO]'];
    var nome = form.elements['cliente[CLI_NOME]'];
    var fantasia = form.elements['cliente[CLI_FANTASIA]'];
    var uf = form.elements['cliente[EST_SIGLA]'];
    var cidade = form.elements['cliente[CID_ID]'];
    var logradouro = form.elements['cliente[CLI_LOGRADOURO]'];
    var CEP = form.elements['cliente[CLI_CEP]'];
    var email = form.elements['cliente[CLI_EMAIL]'];
    var msn = form.elements['cliente[CLI_MSN]'];
    var tel1 = form.elements['cliente[CLI_TEL1]'];
    var CNPJ_CPF = form.elements['cliente[CLI_CNPJ_CPF]'];
    
    //Expressao para teste de email
    testeEmail = /^\w+[\.\-\w]+@\w+([\.][\w]+)+$/;
    
    if (nome.value.length == 0){
        alert("O campo Nome não pode ser vazio!");
        nome.focus();
        return false;
    }else if (fantasia.value.length == 0){
        alert("O campo Nome Fantasia não pode ser vazio!");
        fantasia.focus();
        return false;
    }else if(CNPJ_CPF.value.length == 0){
        alert ("O CNPJ/CPF não pode ser vazio!");
        CNPJ_CPF.focus();
        return false;
    }else if(pessoa.value == "J" && !validaCNPJ(CNPJ_CPF.value)){
        alert ("O CNPJ é inválido!");
        CNPJ_CPF.focus();
        return false;
    }else if(pessoa.value == "F" && !validaCPF(CNPJ_CPF.value)){
        alert ("O CPF é invalido!");
        CNPJ_CPF.focus();
        return false;
    }else if(checaCnpjCpf(CNPJ_CPF.value)){
        alert ("Já existe esse CNPJ/CPF cadastrado!\nNão é permitido mais de um cadastro por CNPJ/CPF.");
        CNPJ_CPF.focus();
        return false;
    }else if (cidade.value == ""){
        alert("O campo Cidade não pode ser vazio!");
        uf.focus();
        return false;
    }else if (CEP.value == ""){
        alert("O campo CEP não pode ser vazio!");
        CEP.focus();
        return false;
    }else if (logradouro.value == ""){
        alert("O campo Logradouro não pode ser vazio!");
        logradouro.focus();
        return false;
    }else if (!testeEmail.test(email.value)){
        alert("O campo Email não possui um valor válido!");
        email.focus();
        return false;
    }else if (msn.value != "" && !testeEmail.test(msn.value)){
        alert("O campo MSN não possui um valor válido!");
        msn.focus();
        return false;
    }else if (tel1.value == ""){
        alert("O campo Telefone 1 não pode ser vazio!");
        tel1.focus();
        return false;
    }
    return true;
}

function validaUsuario(){
    form = document.cliente;
    usuario = form.elements["usuario[USU_NOME]"];
    senha = form.elements["usuario[USU_SENHA]"];
    senha_verificacao = form.elements["senha_verificacao"];
    captcha = form.elements["captcha"];
    if (usuario.value.length < 6){
        alert("O nome de usuário deve ter no mínimo 6 caracteres");
        return false;
    }else if(checaUsuario(usuario.value)){
        alert("Já existe esse usário cadastrado");
        return false;
    }else if (senha.value.length < 6){
        alert("A senha deve ter no mínimo 6 caracteres");
        return false;
    }else if (senha.value != senha_verificacao.value){
        alert("As senhas não coincidem");
        return false;
    }
    return true;
}

function checaUsuario(valor){
    var link = "ajax.php?action=checa_usuario&usuario="+valor;
    retorno = false;
    $.ajax({
        url: link,
        async: false,
        success: function(data) {
           if(data > 0) retorno = true;
       }});
    return retorno;
}

function validaUserName(){
    usuario = document.cliente.elements["usuario[USU_NOME]"];
    if (usuario.value.length < 6){
        $("#mensagem_usuario").html("O usu&aacute;rio deve ter no m&iacute;nimo 6 caracteres");
        usuario.focus();
    }else if (checaUsuario(usuario.value)){
        $("#mensagem_usuario").html("Usu&aacute;rio j&aacute; existe");
        usuario.focus();
    }else{
        $("#mensagem_usuario").html("Usu&aacute;rio V&aacute;lido");
    }
}

function corrige_caracteres(element){
    tmp = element.value.toLowerCase();
    tmp = tmp.replace(" ", "", 'g');
    element.value = tmp;
}

passo = "passo1";

function botao_proximo(){
    
    if(passo == "passo1"){
        // Testa o passo 2
        if(!validaCliente()) return false;
        
        $("#div_passo1").css("display", "none");
        $("#div_passo2").css("display", "block");
        passo = "passo2";
    }else{
        if(!validaUsuario()) return false;
        show_loading_screen();
        document.cliente.submit();
    }
}


<?php include "script/valida_CNPJ_CPF.js"; ?>

</script>
<style>
    #form_usuario select {
        color: #000000;
    }
</style>
<form class="formularios" id="form_usuario" name="cliente" action="./action.php?action=cliente_cadastra" method="post">
<div  id="div_passo1">
    <span class="titulo_conteudo">Passo 1 - Dados do cliente</span>
    <div class="corpo_conteudo">
    <table>
        <tr><td width="105">Tipo:</td><td><select name="cliente[CLI_TIPO]" onchange="juridica_fisica();">
                    <option value="J">J&uacute;ridica</option>
                    <option value="F">F&iacute;sica</option>
                </select></td></tr>
        <tr><td>Nome:*</td><td><input type="text" name="cliente[CLI_NOME]" maxlength="60" size="70%" /></td></tr>
        <tr><td id="td_fantasia">Nome<br/>Fantasia:*</td><td><input type="text" id="nome_fantasia" name="cliente[CLI_FANTASIA]" maxlength="60" size="70%"  /></td></tr>
        <tr><td>CNPJ/CPF:*</td><td><input type="text" id="cliente" name="cliente[CLI_CNPJ_CPF]" size="20" />
                IE/RG: <input class="input" type="text" name="cliente[CLI_IE_RG]" maxlength="20" size="20" /></td></tr>
    </table>
    </div>
<div class="linha_conteudo"></div>
<div class="corpo_conteudo">
    <table>
            <tr><td width="105">UF:</td><td>
                    <select class="select" name="cliente[EST_SIGLA]" onchange="buscaCidade('cidade', this.value);">
                        <option></option>
                    <?php
                        include $app.'dao/dao_localidade.php';

                        $dao_localidade = new dao_localidade();
                        $result = $dao_localidade->selectAllUF();                      

                        foreach($result as $row){
                          if (isset($to) && $to->EST_ID == $row['EST_ID'])
                            echo "<option value=".$row['EST_SIGLA']." selected>".$row['EST_NOME']."</option>";
                          else
                            echo "<option value=".$row['EST_SIGLA'].">".$row['EST_NOME']."</option>";
                        }
                    ?> </select>
                    Cidade:* <select name="cliente[CID_ID]" class="select" id="cidade" style="width: 200px;"></select>
                    CEP:* <input type="text" size="10" name="cliente[CLI_CEP]" id="cep"/></td></tr>
            <tr><td>Logradouro:*</td><td><input type="text" maxlength="60" size="60" name="cliente[CLI_LOGRADOURO]" />
        </td></tr>
            <tr><td>Complemento:</td><td><input type="text" maxlength="30" size="30" name="cliente[CLI_COMPLEMENTO]" />
            Bairro: <input type="text" maxlength="30" size="30" name="cliente[CLI_BAIRRO]" /></td></tr>
        </table>
</div>
<div class="linha_conteudo"></div>
<div class="corpo_conteudo">
    <table>
        <tr><td width="105">Email:*</td><td><input type="text" maxlength="40" size="40" name="cliente[CLI_EMAIL]"  />
                Skype: <input type="text" maxlength="20" size="20" name="cliente[CLI_SKYPE]"  /></td></tr>
        <tr><td>MSN:</td><td><input type="text" maxlength="40" size="40" name="cliente[CLI_MSN]"  />
                Telefone 1:* <input type="text" size="12" name="cliente[CLI_TEL1]" class="telefone"  /></td></tr>
        <tr><td>Telefone 2:</td><td><input type="text" size="12" name="cliente[CLI_TEL2]" class="telefone"  />
                Celular: <input type="text" size="12" name="cliente[CLI_CELULAR]" class="telefone"  />
                FAX: <input type="text" size="12" name="cliente[CLI_FAX]" class="telefone" /></td></tr>
    </table>
</div>
<div class="linha_conteudo"></div>
<div class="corpo_conteudo">
    <table><tr><td width="105">Descri&ccedil;&atilde;o:</td><td>
    <textarea class="textarea" name="cliente[CLI_DESCRICAO]" maxlength="255" rows="7" cols="70" ></textarea>
    </td></tr>
    </table>
</div>
<div class="linha_conteudo"></div><br/>
<small>* Campos obrigat&oacute;rios</small>
<br/><br/>
    <input type="button" onclick="return botao_proximo();" value="Pr&oacute;ximo"/>
</div>
<div  id="div_passo2" style="display: none">
    <span class="titulo_conteudo">Passo 2 - Dados do usu&aacute;rio</span>
    <div class="corpo_conteudo">
        <table>
            <tr><td>Usu&aacute;rio:*</td><td><input type="text" name="usuario[USU_NOME]" maxlength="30" onblur="validaUserName();" onkeyup="corrige_caracteres(this);"/> <span style="color: blue" id="mensagem_usuario"></span></td></tr>
            <tr><td>Senha:*</td><td><input type="password" name="usuario[USU_SENHA]" maxlength="30"/></td></tr>
            <tr><td>Repetir Senha:</td><td><input type="password" name="senha_verificacao" maxlength="30"/></td></tr>
        </table>
    </div>
    <div class="linha_conteudo"></div>
    <br/>
    <small>* O usu&aacute;rio e a senha devem ter no m&iacute;nimo 6 e no m&aacute;ximo 30 caracteres</small>
    <br/><br/>
    <input type="button" onclick="return botao_proximo();" value="Concluir"/>
</div>

</form>